﻿<template>
  <base-dialog
    v-model="modalShow"
    title="选择增值服务"
    width="1000"
    :show-footer="true"
    destroy-on-close
    @close="hide"
    @cancel="hide"
    @confirm="confirm"
  >
    <el-form ref="serviceFormRef" :model="serviceForm" label-width="auto" :inline="true">
      <el-form-item label="服务名称" prop="name">
        <el-input v-model.trim="serviceForm.name" placeholder="请输入服务名称" clearable />
      </el-form-item>
      <el-form-item label="服务类型" prop="type">
        <el-select v-model="serviceForm.type" placeholder="请选择服务类型" :style="{ width: '150px' }">
          <el-option
            v-for="item in getConfig('qingyun.support.customer.additionalServices')"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否强卖" prop="forceFlag">
        <el-select v-model="serviceForm.forceFlag" placeholder="是否强卖" :style="{ width: '120px' }">
          <el-option label="是" :value="1" />
          <el-option label="否" :value="0" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table
      ref="serviceTableRef"
      v-loading="loading"
      row-key="id"
      show-overflow-tooltip
      style="width: 100%; margin-top: 12px"
      :header-cell-style="{ 'background-color': 'var(--fl1)' }"
      :height="600"
      :data="serviceListData"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" :selectable="selectable" width="55" />
      <el-table-column prop="name" label="增值服务名称" width="auto" align="center" min-width="20%" />
      <el-table-column label="增值服务类型" width="auto" align="center" min-width="20%">
        <template #default="scope">
          {{ typeName(scope.row.type) }}
        </template>
      </el-table-column>
      <el-table-column label="增值服务价格" width="auto" align="center" min-width="20%">
        <template #default="scope"> ¥{{ scope.row.price }} </template>
      </el-table-column>
      <el-table-column label="是否强制购买" width="auto" align="center" min-width="20%">
        <template #default="scope">
          {{ scope.row.forceFlag === 1 ? "强制购买" : "不强制购买" }}
        </template>
      </el-table-column>
      <el-table-column
        prop="content"
        label="服务内容"
        width="auto"
        align="center"
        min-width="20%"
        :tooltip-formatter="({ row }) => row.content"
      >
      </el-table-column>
      <template #empty>
        <base-empty description="暂无数据" />
      </template>
    </el-table>
    <div class="page-content">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageParams.pageSize"
        @current-change="handleCurrentChange"
        v-model:current-page="pageParams.pageNumber"
      />
    </div>
  </base-dialog>
</template>

<script setup>
  const props = defineProps({
    visble: {
      type: Boolean,
      default: false,
    },
    checkList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  });
  const emit = defineEmits(["hide", "confirm"]);
  // 监听显隐
  watch(
    () => props.visble,
    v => {
      modalShow.value = v;
      if (modalShow.value) {
        loadServiceList();
      }
    }
  );
  // 获取配置选项
  const getConfig = inject("getConfig");
  // 表格ref
  const serviceTableRef = ref();
  // 表单ref
  const serviceFormRef = ref();
  // 搜索参数
  const serviceForm = ref({
    name: "",
    type: "",
    forceFlag: "",
  });
  // 显示、隐藏
  const modalShow = ref(false);
  // 服务类型数据
  const servcieData = ref([]);
  // 服务列表数据
  const serviceListData = ref([]);
  // 分页参数
  const pageParams = ref({
    pageNumber: 1,
    pageSize: 10,
  });
  // 总数
  const total = ref(0);
  // 加载
  const loading = ref(false);
  // 已选择的列表
  const selectList = ref([]);
  // 列表服务类型
  const typeName = computed(() => item => {
    const currentItem = getConfig("qingyun.support.customer.additionalServices")?.find(el => el.dictValue == item);
    if (currentItem) {
      return currentItem.dictLabel;
    } else {
      return "";
    }
  });
  // 获取服务列表数据
  const loadServiceList = () => {
    loading.value = true;
    Api.product
      .getValueAddedService({ ...serviceForm.value, ...pageParams.value, status: 1 })
      .then(res => {
        loading.value = false;
        serviceListData.value = res.data.records;
        total.value = res.data.total;
        nextTick(() => {
          if (props.checkList.length) {
            props.checkList.forEach(item => {
              serviceTableRef.value.toggleRowSelection(item);
            });
          }
        });
      })
      .finally(() => {
        loading.value = false;
      });
  };
  // 搜索
  const handleSearch = () => {
    pageParams.value = {
      pageNumber: 1,
      pageSize: 10,
    };
    loadServiceList();
  };
  // 重置
  const reset = () => {
    serviceForm.value = {
      name: "",
      type: "",
      forceFlag: "",
    };
    pageParams.value = {
      pageNumber: 1,
      pageSize: 10,
    };
    nextTick(() => {
      loadServiceList();
    });
  };
  // 翻页
  const handleCurrentChange = page => {
    pageParams.value = { ...pageParams.value, pageNumber: page };
    nextTick(() => {
      loadServiceList();
    });
  };
  // 选择
  const handleSelectionChange = val => {
    selectList.value = val;
  };
  // 关闭
  const hide = () => {
    emit("hide");
  };
  // 确认
  const confirm = () => {
    if (!selectList.value.length) {
      $msg.warning("请选择增值服务");
      return;
    }
    console.warn(selectList.value);
    selectList.value.map(item => {
      const typeData = servcieData.value?.find(el => el.dictValue == item.type);
      if (typeData) {
        item.typeName = typeData.dictLabel;
      }
      return item;
    });
    emit("confirm", selectList.value);
  };
</script>

<style lang="scss" scoped>
  .page-content {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
  }
</style>
